<template>


  <div class="h-100P " ref="echartsGraph" ></div>
</template>

<script>
import { handleScreenWidthToVw } from '@/utils/tools'
import mqtt from 'mqtt';

export default {
  name: 'EquipmentGraph',

  data() {
    return {
      /**
       * @public
       * 主要用于刷新和更新数据
       */
      activeName: 'second',
      client:null,
      echartsBar: null,
      itemStyles:{normal: { borderColor: '#03fc62', borderWidth: 4, shadowBlur: 20, shadowColor: '#03fc62',color: '#11213b' }},
      data:  [
        {
          id:0,
          symbol:'rect',
          x: 200,
          y: 500,
          zt:'断开',
          itemStyle:{normal: { borderColor: '#3dff2f', borderWidth: 4, shadowBlur: 20, shadowColor: '#3dff2f',color: '#11213b' }}
        },
        {
          id:1,
          name: '首站',
          symbol:'rect',
          x: 250,
          y: 500,
          zt:'断开',
          itemStyle:{normal: { borderColor: '#ff2f39', borderWidth: 4, shadowBlur: 20, shadowColor: '#ff2f39',color: '#11213b' }}
        },
        {
          id:2,
          symbol:'rect',
          x: 300,
          y: 500,
          zt:'断开',
          itemStyle:{normal: { borderColor: '#ff2f39', borderWidth: 4, shadowBlur: 20, shadowColor: '#ff2f39',color: '#11213b' }}
        },
        {
          id:3,
          name: '肇东',
          symbol:'rect',
          x: 0,
          y: 500,
          zt:'断开',
          itemStyle:{normal: { borderColor: '#ff2f39', borderWidth: 4, shadowBlur: 20, shadowColor: '#ff2f39',color: '#11213b' }}
        },
        {
          id:4,
          symbol:'rect',
          x: 50,
          y: 500,
          zt:'断开',
          itemStyle:{normal: { borderColor: '#ff2f39', borderWidth: 4, shadowBlur: 20, shadowColor: '#ff2f39',color: '#11213b' }}
        },
        {
          id:5,
          name: '904',
          symbol:'rect',
          x: 500,
          y: 500,
          zt:'断开',
          itemStyle:{normal: { borderColor: '#ff2f39', borderWidth: 4, shadowBlur: 20, shadowColor: '#ff2f39',color: '#11213b' }}
        },{
          id: '6',
          symbol:'rect',
          x: 550,
          y: 500,
          zt:'断开',
          itemStyle:{normal: { borderColor: '#ff2f39', borderWidth: 4, shadowBlur: 20, shadowColor: '#ff2f39',color: '#11213b' }}
        },{
          id: '7',
          symbol:'rect',
          x: 420,
          y: 400,
          zt:'断开',
          itemStyle:{normal: { borderColor: '#ff2f39', borderWidth: 4, shadowBlur: 20, shadowColor: '#ff2f39',color: '#11213b' }}
        },{
          id: '8',
          symbol:'rect',
          x: 470,
          y: 400,
          zt:'断开',
          itemStyle:{normal: { borderColor: '#ff2f39', borderWidth: 4, shadowBlur: 20, shadowColor: '#ff2f39',color: '#11213b' }}
        },{
          id: '9',
          name: '驿马山',
          symbol:'rect',
          x: 520,
          y: 400,
          zt:'断开',
          itemStyle:{normal: { borderColor: '#ff2f39', borderWidth: 4, shadowBlur: 20, shadowColor: '#ff2f39',color: '#11213b' }}
        },{
          id:'10',
          name: '呼兰',
          symbol:'rect',
          x: 300,
          y: 400,
          zt:'断开',
          itemStyle:{normal: { borderColor: '#ff2f39', borderWidth: 4, shadowBlur: 20, shadowColor: '#ff2f39',color: '#11213b' }}
        },{
          id:11,
          name: '绥化',
          symbol:'rect',
          x: 620,
          y: 400,
          zt:'断开',
          itemStyle:{normal: { borderColor: '#ff2f39', borderWidth: 4, shadowBlur: 20, shadowColor: '#ff2f39',color: '#11213b' }}
        },{
          id:12,
          symbol:'rect',
          x: 660,
          y: 400,
          zt:'断开',
          itemStyle:{normal: { borderColor: '#ff2f39', borderWidth: 4, shadowBlur: 20, shadowColor: '#ff2f39',color: '#11213b' }}
        },{
          id:13,
          name: '庆安',
          symbol:'rect',
          x: 760,
          y: 400,
          zt:'断开',
          itemStyle:{normal: { borderColor: '#ff2f39', borderWidth: 4, shadowBlur: 20, shadowColor: '#ff2f39',color: '#11213b' }}
        },{
          id: 14,
          symbol:'rect',
          x: 800,
          y: 400,
          zt:'断开',
          itemStyle:{normal: { borderColor: '#ff2f39', borderWidth: 4, shadowBlur: 20, shadowColor: '#ff2f39',color: '#11213b' }}
        },{
          id: 15,
          symbol:'rect',
          x: 760,
          y: 360,
          zt:'断开',
          itemStyle:{normal: { borderColor: '#ff2f39', borderWidth: 4, shadowBlur: 20, shadowColor: '#ff2f39',color: '#11213b' }}
        },{
          id:16,
          name: '神树',
          symbol:'rect',
          x: 900,
          y: 400,
          zt:'断开',
          itemStyle:{normal: { borderColor: '#03fc62', borderWidth: 4, shadowBlur: 20, shadowColor: '#03fc62',color: '#11213b' }}
        },{
          id: 17,
          symbol:'rect',
          x: 940,
          y: 400,
          zt:'断开',
          itemStyle:{normal: { borderColor: '#ff2f39', borderWidth: 4, shadowBlur: 20, shadowColor: '#ff2f39',color: '#11213b' }}
        },{
          id: 18,
          symbol:'rect',
          x: 900,
          y: 360,
          zt:'断开',
          itemStyle:{normal: { borderColor: '#ff2f39', borderWidth: 4, shadowBlur: 20, shadowColor: '#ff2f39',color: '#11213b' }}
        },{
          id: 19,
          name:'带岭',
          symbol:'rect',
          x: 1040,
          y: 400,
          zt:'断开',
          itemStyle:{normal: { borderColor: '#ff2f39', borderWidth: 4, shadowBlur: 20, shadowColor: '#ff2f39',color: '#11213b' }}
        },{
          id: 20,
          symbol:'rect',
          x: 1080,
          y: 400,
          zt:'断开',
          itemStyle:{normal: { borderColor: '#ff2f39', borderWidth: 4, shadowBlur: 20, shadowColor: '#ff2f39',color: '#11213b' }}
        },{
          id: 21,
          name:'摩天岭',
          symbol:'rect',
          x: 1180,
          y: 400,
          zt:'断开',
          itemStyle:{normal: { borderColor: '#ff2f39', borderWidth: 4, shadowBlur: 20, shadowColor: '#ff2f39',color: '#11213b' }}
        },{
          id: 22,
          symbol:'rect',
          x: 1220,
          y: 400,
          zt:'断开',
          itemStyle:{normal: { borderColor: '#ff2f39', borderWidth: 4, shadowBlur: 20, shadowColor: '#ff2f39',color: '#11213b' }}
        },{
          id:23,
          name: '700',
          symbol:'rect',
          x: 700,
          y: 500,
          zt:'断开',
          itemStyle:{normal: { borderColor: '#ff2f39', borderWidth: 4, shadowBlur: 20, shadowColor: '#ff2f39',color: '#11213b' }}
        },{
          id: 24,
          symbol:'rect',
          x: 750,
          y: 500,
          zt:'断开',
          itemStyle:{normal: { borderColor: '#ff2f39', borderWidth: 4, shadowBlur: 20, shadowColor: '#ff2f39',color: '#11213b' }}
        },{
          id:25,
          name: '双城',
          symbol:'rect',
          x: 850,
          y: 500,
          zt:'断开',
          itemStyle:{normal: { borderColor: '#ff2f39', borderWidth: 4, shadowBlur: 20, shadowColor: '#ff2f39',color: '#11213b' }}
        },{
          id: 26,
          symbol:'rect',
          x: 900,
          y: 500,
          zt:'断开',
          itemStyle:{normal: { borderColor: '#ff2f39', borderWidth: 4, shadowBlur: 20, shadowColor: '#ff2f39',color: '#11213b' }}
        },{
          id:27,
          name: '拉林',
          symbol:'rect',
          x: 1000,
          y: 500,
          zt:'断开',
          itemStyle:{normal: { borderColor: '#ff2f39', borderWidth: 4, shadowBlur: 20, shadowColor: '#ff2f39',color: '#11213b' }}
        },{
          id: 28,
          symbol:'rect',
          x: 1050,
          y: 500,
          zt:'断开',
          itemStyle:{normal: { borderColor: '#ff2f39', borderWidth: 4, shadowBlur: 20, shadowColor: '#ff2f39',color: '#11213b' }}
        },{
          id:29,
          name: '915',
          symbol:'rect',
          x: 1150,
          y: 500,
          zt:'断开',
          itemStyle:{normal: { borderColor: '#ff2f39', borderWidth: 4, shadowBlur: 20, shadowColor: '#ff2f39',color: '#11213b' }}
        },{
          id: 30,
          symbol:'rect',
          x: 1200,
          y: 500,
          zt:'断开',
          itemStyle:{normal: { borderColor: '#ff2f39', borderWidth: 4, shadowBlur: 20, shadowColor: '#ff2f39',color: '#11213b' }}
        },

      ],
      links: [
        {
          source: 0,
          target: 4,
        },
        {
          source: 2,
          target: 5,
        },
        {
          source: 1,
          target: 8
        },
        {
          source: 7,
          target: 10
        },
        {
          source: 9,
          target: 11
        },
        {
          source: 12,
          target: 13
        },
        {
          source: 14,
          target: 16
        },
        {
          source: 17,
          target: 19
        },
        {
          source: 20,
          target: 21
        },
        {
          source: '适配器',
          target: '核心交换机'
        },
        {
          source: '核心交换机',
          target: '微波设备'
        },
        {
          source: '电源监控',
          target: '微波设备'
        }
      ]
    }
  },
  computed: {
    // eslint-disable-next-line vue/no-dupe-keys
   newLinks : function () {
      return JSON.parse(JSON.stringify(this.links))
    },
    echartsOption() {
      return {
        tooltip: {
          // 鼠标是否可以进入悬浮框
          enterable: true,
          // 触发方式 mousemove, click, none, mousemove|click
          triggerOn: 'click',
          // item 图形触发， axis 坐标轴触发， none 不触发
          trigger: 'item',
          // 浮层隐藏的延迟
          hideDelay: 800,
          // 背景色
          backgroundColor: 'rgba(0,0,0,0)',
          formatter: function (params) {
            console.log(params.data)
            if (params.name=='电源监控'){
              return '<div class="chartLabel">'+
                '<div class=title>'+params.name+'</div>'+
                '<div class=content>运行状态：'+params.data.zt+'</div>'+
                '<div class=content>母排电压（V）：'+params.data.scdy+'</div>'+
                '<div class=content>负载电流（A）：'+params.data.fzzdl+'</div>'+
                '<div class=content>电池1电流（A）：'+params.data.dcydl+'</div>'+
                '<div class=content>电池2电流（A）：'+params.data.dcedl+'</div>'+
                '<div class=content>电池1温度（℃）：'+params.data.dc1wd+'</div>'+
                '<div class=content>电池2温度（℃）：'+params.data.dc2wd+'</div>'+
                '<div class=content>电池1容量（%）：'+params.data.dc1rl+'</div>'+
                '<div class=content>电池2容量（%）：'+params.data.dc2rl+'</div>'+
                '<div class=content>环境湿度（%）：'+params.data.sjsd+'</div>'+
                '</div>'
            }else if (params.name==='核心交换机'){
                return '<div class="chartLabel">'+
                  '<div class=title>'+params.name+'</div>'+
                  '<div class=content>运行状态：'+params.data.zt+'</div>'+
                  '<div class=content>端口&nbsp;&nbsp;&nbsp;&nbsp;类型&nbsp;&nbsp;&nbsp;&nbsp;流量&nbsp;&nbsp;&nbsp;&nbsp;设备&nbsp;&nbsp;&nbsp;&nbsp;状态</div>'+
                  '<div class=content>'+params.data.port[0].name+'&nbsp;&nbsp;&nbsp;'+params.data.port[0].type+'&nbsp;&nbsp;&nbsp;'+params.data.port[0].value+'&nbsp;&nbsp;&nbsp;&nbsp;'+params.data.port[0].equipment+'&nbsp;&nbsp;&nbsp;&nbsp;'+params.data.port[0].state+'</div>'+
                  '<div class=content>'+params.data.port[1].name+'&nbsp;&nbsp;&nbsp;'+params.data.port[1].type+'&nbsp;&nbsp;&nbsp;'+params.data.port[1].value+'&nbsp;&nbsp;&nbsp;&nbsp;'+params.data.port[1].equipment+'&nbsp;&nbsp;&nbsp;&nbsp;'+params.data.port[1].state+'</div>'+
                  '</div>'
              }else{
                return '<div class="chartLabel">'+
                  '<div class=title>'+params.name+'</div>'+
                  '<div class=content>运行状态（A）：'+params.data.zt+'</div>'+
                  '</div>'
            }
          }
        },
        animationDurationUpdate: 1500,
        animationEasingUpdate: 'quinticInOut',
        series: [
          {
            type: 'graph',
            layout: 'none',
            symbolSize: 50,
            roam: true,
            label: {
              show: true,
              position: 'bottom',
              color: 'orange'
            },
            edgeSymbol: ['circle', 'arrow'],
            edgeSymbolSize: [4, 10],
            edgeLabel: {
              fontSize: 20
            },
            data: this.data,
            // links: [],
            links:this.links,
            lineStyle: {
              type: 'dotted',
              width: 2,
              color: '#175064'

            }
          }
        ],
      }
    },
  },
  watch:{
    newLinks: {
      handler (newVal, oldVal) {
        console.log(newVal,oldVal)
        this.echartsOption.series.links=this.links;
        this.echartsBar.setOption(this.echartsOption)
      }
    }
  },
  created() {
    this.setTime()
  },
  mounted() {
    this.echartsBar = this.$echarts.init(this.$refs.echartsGraph)
    this.echartsBar.setOption(this.echartsOption)
    const options = {
      connectTimeout: 40000,
      clientId: 'mqtitId-Home',
      username: 'admin',
      password: 'public',
      clean: true
    };
    this.client = mqtt.connect('ws://192.168.0.50:8083/mqtt', options)
    this.mqttMSG();
  },
  methods: {
    // 跳转
    handleClick(tab, event) {
      console.log(tab, event);
    },
    mqttMSG() {
      if (this.client.connected) {
        this.client.end();
      }
      // mqtt连接
      this.client.on('connect', e => {
        this.client.subscribe(['web_msg', 'test2'], error => {
          if (!error) {
            console.log('订阅成功');
          } else {
            console.log('订阅失败');
          }
        });
      });
      // 接收消息处理
      this.client.on('message', (topic, message) => {
        console.log('收到来自', topic, '的消息', message.toString());
        console.log('message: ', JSON.parse(message.toString()));
        this.saveList(JSON.parse(message.toString()));
      });
      // 断开发起重连
      this.client.on('reconnect', error => {
        console.log('正在重连:', error);
      });
      // 链接异常处理
      this.client.on('error', error => {
        console.log('连接失败:', error);
      });
    },
    setTime(){
      //每隔一分钟运行一次保存方法
      this.timer = setInterval(()=>{
        const pro= [
          {'name':'prot1','value':Math.floor(Math.random()*1000)+1,'type':'输入','equipment':'微波','state':'正常'},
          {'name':'prot2','value':Math.floor(Math.random()*1000)+1,'type':'输出','equipment':'适配器','state':'正常'}
        ]
        this.saveListJ(pro);
      },10000)
    },
    saveListJ(jsdata){
      // eslint-disable-next-line no-empty
      for (let i = 0; i <this.links.length; i++) {
        // eslint-disable-next-line no-unused-vars
        const sc=this.links[i].source;
        if (sc=='核心交换机'){
          this.links[i].lineStyle={width: 5,color:'green'}
          this.echartsOption.series.links=this.links;
          this.echartsOption.series.data
          this.echartsBar.setOption(this.echartsOption)
        }
      }
      for (let i = 0; i <this.data.length; i++) {
        // eslint-disable-next-line no-unused-vars
        const sc=this.data[i].name;
        if (sc=='核心交换机'){
          console.log(jsdata)
          this.data[i].zt='正常'
          this.data[i].port=jsdata
          this.data[i].itemStyle={
            normal: {
              borderColor: '#03fc62',
              borderWidth: 4,
              shadowBlur: 20,
              shadowColor: '#03fc62',
              color: '#11213b'
            }
          }
          this.echartsOption.series.data=this.data
          this.echartsBar.setOption(this.echartsOption)
        }
      }
    },
    saveList(jsdata){
      // eslint-disable-next-line no-empty
      for (let i = 0; i <this.links.length; i++) {
        // eslint-disable-next-line no-unused-vars
        const sc=this.links[i].source;
        if (sc=='电源监控'){
          this.links[i].lineStyle={width: 5,color:'green'}
          this.echartsOption.series.links=this.links;
          this.echartsOption.series.data
          this.echartsBar.setOption(this.echartsOption)
        }
      }
      for (let i = 0; i <this.data.length; i++) {
        // eslint-disable-next-line no-unused-vars
        const sc=this.data[i].name;
        if (sc=='电源监控'){
          console.log(jsdata)
          this.data[i].zt='正常'
          this.data[i].scdy=jsdata.scdy
          this.data[i].fzzdl=jsdata.fzzdl
          this.data[i].dczsl=jsdata.dczsl
          this.data[i].dcydl=jsdata.dcydl
          this.data[i].dcedl=jsdata.dcedl
          this.data[i].dc1wd=jsdata.dc1wd
          this.data[i].dc2wd=jsdata.dc2wd
          this.data[i].dc1rl=jsdata.dc1rl
          this.data[i].dc2rl=jsdata.dc2rl
          this.data[i].sjsd=jsdata.sjsd
          this.data[i].itemStyle={
            normal: {
              borderColor: '#03fc62',
              borderWidth: 4,
              shadowBlur: 20,
              shadowColor: '#03fc62',
              color: '#11213b'
            }
          }
          this.echartsOption.series.data=this.data
          this.echartsBar.setOption(this.echartsOption)
        }
      }
    }
  },
}
</script>

<style lang="scss" scoped>
//  @import '@/child-business/styles/IndustrialVision.scss';
::v-deep .el-form-item__label{text-align: center;}
.swich-title{
  margin-left: 10px;
  margin-bottom: 20px;
  span{
    font-size: 16px;
    display: inline-block;
    line-height: 1.5em;
    padding: 0.5em;
    border-bottom: 2px solid transparent;
    &.active{
      color: #1890FF;
      border-bottom: 2px solid #1890FF;
    }
  }
}
</style>
